<template>
	<view class="login" :style="{height:wh+'px'}">
		<!-- 显示上方的图片 -->
		<view class="title">
			<view style="font-size: 40px;color: aquamarine;padding: 0 20px;">用户登录</view>

		</view>
		<!-- 下方的表单 -->
		<view class="content">
			<uni-forms ref="logForm" :model="logFormData" :rules="rules" validateTrigger="blur">
				<uni-forms-item name="username">
					<uni-easyinput v-model="logFormData.username" prefix-icon="person" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput type="password" v-model="logFormData.password" prefix-icon="locked"
						placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
			<button class="button" type="primary" @click="login()">登录</button>
		</view>
		<!-- 下方的跳转注册 -->
		<view class="register">
			<navigator url="/pages/register/register">还没有账号 ，点击注册</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onReady,
		onBackPress
	} from "@dcloudio/uni-app"
	import {
		userStore
	} from '/store/userStrore.js'
	import {
		CONFIG
	} from "../../utils/config";
	// 创建状态库对象
	const store = userStore();

	const logFormData = ref({
		username: 'admin123',
		password: '123456@'
	})
	const rules = ref({
		username: {
			rules: [{
					required: true,
					errorMessage: '请输入用户名'
				},
				{
					minLength: 3,
					maxLength: 10,
					errorMessage: '用户必须在{minLength}到{maxLength}个字符之间'
				}, {
					pattern: '^\\w{3,10}$',
					errorMessage: '请输入3-10位数字字母和下划线作为用户名'
				}
			]
		},
		password: {
			rules: [{
				required: true,
				errorMessage: '请输入密码'
			}, {
				pattern: '^[a-zA-Z0-9._!@#$%^&]{3,10}$',
				errorMessage: '请输入3-10位数字字母和特殊字符密码'
			}]
		}
	})

	function toRegister() {
		uni.navigateTo({
			url: "/pages/register/register"
		})
	}
	const wh = ref(0)
	onReady(() => {

		wh.value = uni.getWindowInfo().windowHeight
	})
	
		// 登录表单数据和登录功能
		const logForm = ref(null)
	
		function login() {
			logForm.value.validate().then(res => {
				console.log(res)
				let res2 = uni.$post(`${CONFIG.leanCloud_url}/1.1/login`, res).then(res2 => {
					console.log(res2)
					if (res2.statusCode = 200) {
						store.addUserInfo(res2.data.objectId, res2.data.username, res2.data.mobilePhoneNumber,
							res2.data.sessionToken)
					} else {
						if (res2.data.code == 211) {
							uni.showToast({
								title: "用户名不存在",
								icon: "none"
							})
						}
	
					}
	
				})
	
	
	
			}).catch(err => {
				console.log(err)
			})
	
	
	
	
			// 用户登录操作
		}
		onBackPress((options) => {
			if (options.from == "backbutton") {
				return true;
			}
		})
	</script>
	
	<style scoped>
		.login {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #f5f5f5;
			padding: 20px;
		}
	
		.title {
			text-align: center;
			margin-bottom: 20px;
		}
	
		.content {
			width: 100%;
			max-width: 400px;
			background-color: #fff;
			padding: 20px;
			border-radius: 8px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		}
	
		uni-forms {
			display: flex;
			flex-direction: column;
		}
	
		uni-forms-item {
			margin-bottom: 15px;
		}
	
		uni-easyinput {
			width: 100%;
			border: 1px solid #ddd;
			border-radius: 4px;
			padding: 10px;
			box-sizing: border-box;
		}
	
		.button {
			width: 100%;
			background-color: #1aad19;
			color: #fff;
			border: none;
			border-radius: 4px;
			padding: 10px;
			font-size: 16px;
			margin-top: 20px;
		}
	
		.register {
			margin-top: 20px;
			text-align: center;
		}
	
		navigator {
			color: #1aad19;
			text-decoration: none;
			font-size: 14px;
		}
	</style>